<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
	.header{position:absolute;top:0;left:0;right:0;width: 100%;height: 250px;}
	.header_top{background-color:#353535;width: 100%;height: 50px;}
	.header_top_container{width: 900px;height: 50px;margin: auto;}
	.header_top_container_logo{width: 200px;height:50px;float: left;}
	.header_top_container_account{width: 700px;height: 50px;float: left;}
	.header_top_container_account_logoff{width: 700px;height: 50px;float: left;}
	.header_top_container_account_logoff_login{width: 80px;height: 12px;color: #D5D5D5;font-size:12px;font-weight: bold;margin-top:19px;margin-left:540px;float: left;}
	.header_top_container_account_logoff_register{width: 80px;height: 12px;color: #D5D5D5;font-size:12px;font-weight: bold;margin-top:19px;float: left;}
	.header_top_container_account_login{width: 700px;height: 50px;float: left;}
	.header_top_container_account_login_id{width:40px;height: 12px;color: #D5D5D5;font-size:12px;font-weight: bold;margin-top:19px;margin-left:190px;float: left;}
	.header_top_container_account_login_idText{margin-top:15px;margin-left:10px;float: left;}
	.header_top_container_account_login_pw{width:50px;height: 12px;color: #D5D5D5;font-size:12px;font-weight: bold;margin-top:19px;margin-left:10px;float: left;}
	.header_top_container_account_login_pwText{margin-top:15px;margin-left:10px;float: left;}
	.header_top_container_account_login_button{margin-top:14px;margin-left:10px;float: left;}
	.header_top_container_account_login_cancel{margin-top:14px;margin-left:10px;float: left;}
	.header_top_container_account_register{width: 700px;height: 50px;float: left;}
	.header_top_container_account_logon{width: 700px;height: 50px;float: left;}
	.header_top_container_account_logon_mypage{width: 80px;height: 12px;color: #D5D5D5;font-size:12px;font-weight: bold;margin-top:19px;margin-left:540px;float: left;}
	.header_top_container_account_logon_logout{width: 80px;height: 12px;color: #D5D5D5;font-size:12px;font-weight: bold;margin-top:19px;float: left;}
	.header_body{background-color:#A6A6A6;width: 100%;height: 150px;}
	.header_body_container{width: 900px;height: 150px;margin: auto;}
	.header_body_container_search{border:1px solid lightgray;border-radius:2px;width: 340px;height: 40px;margin-top: 55px;margin-left: 280px;float: left;}
	.header_body_container_search_left{width: 300px;height: 40px;float: left;}
	.header_body_container_search_right{background-color:green;width: 40px;height: 40px;float: left;}
	.header_bottom{border-bottom:2px solid lightgray;width: 100%;height: 50px;}
	.header_bottom_container{width: 900px;margin: auto;}
	.header_bottom_container_line{width: 150px;height:50px;float: left;}
	.header_bottom_container_ranking{width: 150px;height:50px;float: left;}
	.header_bottom_container_write{width: 180px;height:50px;margin-left:420px;float: left;}
</style>
<script type="text/javascript">
	function allClear(){
		$('#member_mail').val("");   
		$('#member_pass').val("");
		
		$('#member_mail2').val("");   
		$('#member_pass2').val("");
		
		$('.header_top_container_account_login').hide();
		$('.header_top_container_account_register').hide();
		$('.header_top_container_account_logoff').show();
	}

	$(function(){
		$('.header_top_container_account_login').hide();
		$('.header_top_container_account_register').hide();
		
		$('.header_top_container_account_logoff_login').click(function(){
			$('.header_top_container_account_logoff').hide();
			$('.header_top_container_account_login').show();
		});
		
		$('.header_top_container_account_logoff_register').click(function(){
			$('.header_top_container_account_logoff').hide();
			$('.header_top_container_account_register').show();
		});
		
		$('.header_top_container_account_logoff_register').click(function(){
			$('.header_top_container_account_register').dialog();
		});
		
		//logout
		$('.header_top_container_account_logon_logout').click(function(){
			if(confirm("로그아웃 하시겠습니까?")){
				$.ajax({
					type:'post',
					url:'member.do',
					data: 'command=logout',
					dataType:'json',
				});//ajax
				alert("로그아웃 되었습니다.");
				location.reload();
			}
		});//logout
		
	   
		$('.header_bottom_container_line').hover(function(){
			$('.header_bottom_container_line img').attr('src','../img/view/index/line_search_selected.png');		
		}, function(){
			$('.header_bottom_container_line img').attr('src','../img/view/index/line_search_deselected.png');
		});
		
		$('.header_bottom_container_ranking').hover(function(){
			$('.header_bottom_container_ranking img').attr('src','../img/view/index/rank_selected.png');		
		}, function(){
			$('.header_bottom_container_ranking img').attr('src','../img/view/index/rank_deselected.png');
		});
		
		$('.header_bottom_container_write').hover(function(){
			$('.header_bottom_container_write img').attr('src','../img/view/index/header_write_selected.png');		
		}, function(){
			$('.header_bottom_container_write img').attr('src','../img/view/index/header_write_deselected.png');
		});
	});
	
	function login(){
		if($('input[name=member_mail]').val()==""){
			alert("메일을 입력하세요.");
			$(this).focus();
			return false;
		}
		if($('input[name=member_pass]').val()==""){
			alert("비밀번호를 입력하세요.");
			$(this).focus();
			return false;
		}
		
		$.ajax({
			type:'post',
			url:'member.do',
			data: $('#loginForm').serialize(),
			dataType:'json',
		
			success:function(data){
				alert(data.message);
				if(data.message=="로그인에 성공했습니다"){
					location.reload();
				}
			}, error: function(result){
				alert("로그인에 실패하였습니다.");
			}
		});
	}
	
	function register(){
		if($('input[name=member_mail2]').val()==""){
			alert("메일을 입력하세요.");
			$('input[name=member_mail2]').focus();
			return false;
		}
		if($('input[name=member_pass2]').val()==""){
			alert("비밀번호를 입력하세요.");
			$('input[name=member_pass2]').focus();
			return false;
		}
		if($('input[name=member_pass2_check]').val()==""){
			alert("비밀번호를 확인해주세요.");
			$('input[name=member_pass2_check]').focus();
			return false;
		}
		if($('input[name=member_pass2]').val()!=$('input[name=member_pass2_check]').val()){
			alert("비밀번호를 확인해주세요.");
			$('input[name=member_pass2_check]').focus();
			return false;
		}
		
		$.ajax({
			type:'post',
			url:'member.do',
			data: $('#registerForm').serialize(),
			dataType:'json',
			
			success:function(data){
				alert(data.message2);
				if(data.message2=="회원가입이 완료되었습니다"){
					location.reload();
				}else if(data.message2=="이미 존재하는 회원입니다."){
					$('#member_mail').focus();
				}
			}
		});
	}
	
	function search(){
		$('#searchForm').submit();
	}
</script>
</head>
<body>
	<div class="header">
		<div class="header_top">
			<div class="header_top_container">
				<div class="header_top_container_logo">
					<img alt="" src="../img/view/index/home_logo.png" width="200px" height="50px">
				</div>
				<div class="header_top_container_account">
					<c:choose>
						<c:when test="${sessionScope.member_no==null}">
							<div class="header_top_container_account_logoff">
								<div class="header_top_container_account_logoff_login pointercursor">
									로그인
								</div>
								<div class="header_top_container_account_logoff_register pointercursor">
									회원가입
								</div>
							</div>
							<div class="header_top_container_account_login">
								<form id="loginForm">
									<input type="hidden" name="command" value="login">
									<div class="header_top_container_account_login_id">
										이메일
									</div>
									<div class="header_top_container_account_login_idText">
										<input name="member_mail" id="member_mail" type="text" style="width: 120px; height:20px; border: none;">
									</div>
									<div class="header_top_container_account_login_pw">
										비밀번호
									</div>
									<div class="header_top_container_account_login_pwText">
										<input name="member_pass" id="member_pass" type="password" style="width: 120px; height:20px; border: none;">
									</div>
									<div class="header_top_container_account_login_button">
										<a href="javascript:login()"><img alt="" src="../img/view/index/login.png" width="50px" height="24px"></a>
									</div>
									<div class="header_top_container_account_login_cancel">
										<a href="javascript:allClear()"><img alt="" src="../img/view/index/cancel.png" width="50px" height="24px"></a>
									</div>
								</form>
							</div>
							<div class="header_top_container_account_register" title="회원가입">
								<form id="registerForm">
									<input type="hidden" name="command" value="registerMember">
									<div class="header_top_container_account_register_id">
										이메일
									</div>
									<div class="header_top_container_account_register_idText">
										<input name="member_mail2" id="member_mail2" type="text" style="width: 120px; height:20px; border: none;">	
									</div>
									<div class="header_top_container_account_register_pw">
										비밀번호
									</div>
									<div class="header_top_container_account_register_pwText">
										<input name="member_pass2" id="member_pass2" type="password" style="width: 120px; height:20px; border: none;">
									</div>
									<div class="header_top_container_account_register_pwcheck">
										비밀번호 확인
									</div>
									<div class="header_top_container_account_register_pwcheckText">
										<input name="member_pass2_check" id="member_pass2_check" type="password" style="width: 120px; height:20px; border: none;">
									</div>
									<div class="header_top_container_account_register_button">
										<a href="javascript:logincancel()"><img alt="" src="../img/view/index/register.png" width="50px" height="24px"></a>
									</div>
								</form>
							</div>
						</c:when>
						<c:otherwise>
							<div class="header_top_container_account_logon">
								<div class="header_top_container_account_logon_mypage">
									마이페이지
								</div>
								<div class="header_top_container_account_logon_logout">
									로그아웃
								</div>
							</div>
						</c:otherwise>
					</c:choose>
				</div>
			</div>
		</div>
	
		<div class="header_body">
			<div class="header_body_container">
				<div class="header_body_container_search">
					<form action="major.do" method="get" id="searchForm">
						<input type="hidden" name="command" value="searchMajorUnitByWord">
						<div class="header_body_container_search_left">
							<input type="text" id="searchText" name="search" value="${param.search}" style="width: 300px;height: 38px;border: none;color: #5D5D5D;font-size: 15px;">	
						</div>
						<div class="header_body_container_search_right">
							<a href="javascript:search()"><img alt="" src="../img/view/index/search_button.png" width="40px" height="40px"></a>
						</div>
					</form>
				</div>
			</div>
		</div>
		
		<div class="header_bottom">
			<div class="header_bottom_container">
				<div class="header_bottom_container_line">
					<a href="major.do?command=searchMajorUnitByWord"><img alt="" src="../img/view/index/line_search_deselected.png" width="150px"></a>
				</div>
				<div class="header_bottom_container_ranking">
					<a href="major.do?command=ranking"><img alt="" src="../img/view/index/rank_deselected.png" width="150px"></a>
				</div>
				<div class="header_bottom_container_write">
					<a href="review.do?command=write"><img alt="" src="../img/view/index/header_write_deselected.png" width="180px"></a>
				</div>
			</div>
		</div>
	</div>
</body>
</html>